<template>
  <div class="y-handle" @mousedown="mouseDown"> </div>
</template>

<script setup>
import { throttle } from 'lodash';
const emit = defineEmits(['heigthChange'])
const lastY = ref('')

//鼠标释放节流事件
// const handleMoveThrottled = throttle(mouseUp, 300)

//鼠标抬起
function mouseUp(event) {
  document.removeEventListener('mousemove', mouseMove)
  document.removeEventListener('mousedown',mouseDown)
}

//鼠标按下
function mouseDown(event) {
  document.addEventListener('mousemove', mouseMove)
  lastY.value = event.screenY
}

//鼠标移动
function mouseMove(event) {
  let bodyHeight = window.innerHeight
  console.log('bodyHeight', bodyHeight)
  let diffHeight = bodyHeight - event.clientY
  emit('heigthChange', diffHeight)
}

// onMounted时添加鼠标移动事件监听器
onMounted(() => {
  document.addEventListener('mouseup', mouseUp)
})
// 组件卸载时移除监听
onUnmounted(() => {
  document.removeEventListener('mouseup', mouseUp)
})
</script>

<style lang="scss" scoped>
.y-handle {
  position: absolute;
  z-index: 10;
  width: 98%;
  height: 100%;
  cursor: s-resize;
}
</style>